$(function(){

// 第一个数据可视化图标
// 1.创建一个echarts实例
// 基于准备好的dom，初始化echarts实例
var myChart1 = echarts.init(document.getElementById('chart1'));
// 2.准备图标所需的数据
// 指定图表的配置项和数据
var option = {
  title: {
      text: '热门购物'
  },
  tooltip: {},
  legend: {
      data:['销量','热度']
  },
  xAxis: {
      data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',  //bar 柱状图 line折线图  pie 饼图
      data: [5, 20, 36, 10, 10, 20]
  },
  {
    name: '热度',
    type: 'bar',  //bar 柱状图 line折线图  pie 饼图
    data: [14, 40, 26, 30, 20, 10]
}
]
};
// 3.把数据给图片进行渲染
// 使用刚指定的配置项和数据显示图表。
myChart1.setOption(option);

// 第二个

var myChart2 = echarts.init(document.getElementById('chart2'));
// 2.准备图标所需的数据
// 指定图表的配置项和数据
var option1 = {
  title : {
      text: '2019热销品牌',
      subtext: '纯属虚构',
      x:'center',
      textStyle:{
        color:'pink'
      }
  },
  tooltip : {
      trigger: 'item',
      formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
      orient: 'vertical',
      left: 'left',
      data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
  },
  series : [
      {
          name: '品牌',
          type: 'pie',
          radius : '55%',
          center: ['50%', '60%'],
          data:[
              {value:335, name:'直接访问'},
              {value:310, name:'邮件营销'},
              {value:234, name:'联盟广告'},
              {value:135, name:'视频广告'},
              {value:1548, name:'搜索引擎'}
          ],
          itemStyle: {
              emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
          }
      }
  ]
};
// 3.把数据给图片进行渲染
// 使用刚指定的配置项和数据显示图表。
myChart2.setOption(option1);

})